<template>
    <div class="wpwork-preview-main user-form">
          <el-row class="wpwork-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="4">
                <el-form-item label="任务标题">
                  <el-input v-model="pageInfo.fText" placeholder="请输入任务标题" clearable
                            @keyup.enter.native="search()" />
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item label="任务状态">
                  <el-select v-model="pageInfo.fExecutionStatus" placeholder="请选择状态" clearable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="已完成" value="已完成"></el-option>
<!--                    <el-option label="进行中" value="进行中"></el-option>-->
                    <el-option label="未完成" value="未完成"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="任务类型">
                  <el-select v-model="pageInfo.fType" placeholder="请选择类型" clearable>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="协同任务" value="协同任务"></el-option>
                    <el-option label="个人任务" value="个人任务"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="任务接收人">
                  <el-input v-model="pageInfo.fRealName" placeholder="请输入任务接收人" clearable
                            @keyup.enter.native="search()" />
                </el-form-item>
              </el-col>
<!--              <el-col :span="5">-->
<!--                <el-form-item label="时间范围">-->
<!--                  <el-date-picker-->
<!--                    v-model="dateRange"-->
<!--                    type="daterange"-->
<!--                    range-separator="至"-->
<!--                    start-placeholder="开始日期"-->
<!--                    end-placeholder="结束日期"-->
<!--                    value-format="yyyy-MM-dd"-->
<!--                    @change="onDateChange">-->
<!--                  </el-date-picker>-->
<!--                </el-form-item>-->
<!--              </el-col>-->

              <el-col :span="6">
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                  <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>

            </el-form>
          </el-row>
          <div class="wpwork-common-layout-main wpwork-flex-main">
            <!--        <div class="wpwork-common-head" style="justify-content: flex-start;">-->
            <!--          <el-button type="primary" icon="el-icon-plus" @click="addHandle()">新增</el-button>-->
            <!--          <el-button type="primary" icon="el-icon-download">导出</el-button>-->
            <!--        </div>-->
            <wpwork-table v-loading="listLoading" :data="list">
              <el-table-column prop="ftext" label="任务标题" show-overflow-tooltip width="250" />
              <el-table-column prop="fexecutionStatus" label="任务状态" width="200">
                <template slot-scope="scope">
            <span
              :style="scope.row.fexecutionStatus == '已完成' ? 'color: #5AC725;':'color: #F14141;'">
              {{ scope.row.fexecutionStatus }}
            </span>
                </template>
              </el-table-column>
              <el-table-column prop="ftype" label="任务类型" width="250" />
              <el-table-column prop="frealName" label="任务接收人" width="150" />
              <el-table-column prop="finstantperson" label="负责人" width="200">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.finstantperson === '负责人'" type="success">{{ scope.row.finstantperson }}</el-tag>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="fbegindate" label="开始时间" width="170">
                <template slot-scope="scope">
                  {{ formatDate(scope.row.fbegindate) }}
                </template>
              </el-table-column>
              <el-table-column prop="fenddate" label="结束时间" width="170">
                <template slot-scope="scope">
                  {{ formatDate(scope.row.fenddate) }}
                </template>
              </el-table-column>

              <el-table-column label="操作" fixed="right" width="150">
                <template slot-scope="scope">
                  <el-button type="text" @click="openDetails(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </wpwork-table>

            <!-- 分页组件 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageInfo.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
              style="margin-top: 16px; text-align: right;"
            >
            </el-pagination>
          </div>

          <!-- 任务详情对话框 -->
          <el-dialog
            :title="detailDialogTitle"
            :visible.sync="detailVisible"
            width="70%"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
            @close="handleDetailClose"
          >
            <TaskDetail
              v-if="detailVisible"
              :taskData="currentTask"
              @close="handleDetailClose"
              @edit="handleEditTask"
              @refresh="initData"
            />
          </el-dialog>

          <!-- 原有的协同任务对话框（保留） -->
          <el-dialog title="任务详情" :visible.sync="formVisible"  width="80%">
            <div class="collaborPage">
              <!-- 协同任务的内容保持不变 -->
            </div>
          </el-dialog>

          <Form6 v-if="formVisible6" ref="Form6" @refreshDataList="initData" />
  </div>
      </template>

      <script>
        import mixin from '@/mixins/generator/index'
        import {getTaskById,getTaskById1} from '@/api/group'
        import TaskDetail from "./TaskDetail";

        export default {
          name: 'homeworkManagement',
          mixins: [mixin],
          components: {TaskDetail},

          data() {
            return {
              formVisible6: false,
              list: [],
              listLoading: false,
              pageInfo: {
                page: 1,
                size: 10,
                fText: "",
                fExecutionStatus: "",
                fType: "",
                fRealName: "",
                fAccount: "",
                fTaskNumber: "",
                startDate: null,
                endDate: null
              },
              pagination: {
                current: 1,
                size: 10,
                total: 0
              },
              formVisible: false, // 协同任务对话框
              detailVisible: false, // 个人任务详情对话框
              currentTask: {}, // 当前查看的任务数据
              detailDialogTitle: '任务详情'
            }
          },
          mounted() {
            this.initData()
          },
          methods: {
            addHandle() {
              this.formVisible6 = true;
              this.$nextTick(() => {
                this.$refs.Form6.init();
              });
            },

            // 打开任务详情 - 修复后的方法
            openDetails(row) {
              console.log('打开详情，行数据:', row);

              // 确保数据格式正确
              this.currentTask = {
                fId: row.fid, // 注意字段名大小写
                fType: row.ftype,
                fText: row.ftext,
                fExecutionStatus: row.fexecutionStatus,
                fTaskNumber: row.ftaskNumber,
                fRealName: row.frealName,
                fInstantperson: row.finstantperson,
                fBegindate: row.fbegindate,
                fEnddate: row.fenddate
              };

              console.log('处理后传递给详情组件的数据:', this.currentTask);

              this.detailDialogTitle = `任务详情 - ${row.ftext || '未知任务'}`;
              this.detailVisible = true;

              // 添加调试信息
              console.log('弹框状态 detailVisible:', this.detailVisible);
            },

            // 关闭详情
            handleDetailClose() {
              console.log('关闭详情弹框');
              this.detailVisible = false;
              this.currentTask = {};
            },

            // 编辑任务
            handleEditTask(task) {
              console.log('编辑任务:', task);
            },

            // 获取数据
            async initData() {
              try {
                this.listLoading = true;
                const response = await getTaskById1(this.pageInfo)
                if (response.code === 200) {
                  this.list = response.data.list || []
                  this.pagination = response.data.pagination || {}
                  console.log('任务列表:', this.list);
                } else {
                  this.$message.error(response.msg || '获取任务失败')
                }
              } catch (error) {
                console.error('获取任务失败:', error)
                this.$message.error('获取任务失败')
              } finally {
                this.listLoading = false;
              }
            },

            // 搜索
            search() {
              this.pageInfo.page = 1;
              this.initData();
            },

            // 重置
            reset() {
              this.pageInfo = {
                page: 1,
                size: 10,
                fText: "",
                fExecutionStatus: "",
                fType: "",
                fRealName: "",
                fAccount: "",
                fTaskNumber: "",
                startDate: null,
                endDate: null
              }
              this.initData();
            },

            // 分页大小改变
            handleSizeChange(size) {
              this.pageInfo.size = size;
              this.pageInfo.page = 1;
              this.initData();
            },

            // 当前页改变
            handleCurrentChange(page) {
              this.pageInfo.page = page;
              this.initData();
            },

            formatDate(timestamp) {
              if (!timestamp) return '';
              const date = new Date(timestamp);
              const year = date.getFullYear();
              const month = (date.getMonth() + 1).toString().padStart(2, '0');
              const day = date.getDate().toString().padStart(2, '0');
              const hours = date.getHours().toString().padStart(2, '0');
              const minutes = date.getMinutes().toString().padStart(2, '0');
              const seconds = date.getSeconds().toString().padStart(2, '0');
              return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
          }
        }
      </script>

<style lang="scss" scoped>
  .collaborPage {
    min-height: 400px;
    position: relative;
  }

  .el-pagination {
    padding: 16px 0;
  }
  .user-form{
    margin-top: 68px;
    height: 92%;
  }
  @media (max-width: 1268px) {
    .user-form {
        margin-top: 98px;

    }
  }
  @media (max-width: 768px) {
    .user-form {
        margin-top: 168px;

    }
  }
  >>> .icon-ym {
    font-size: 12px !important;
  }
  </style>
